<template>
	<Layout class-name="Layout hideH">
    <view class="search-box flex-lect box">
    	<u-icon name="search" color="#05B196" size="40"></u-icon>
    	<input class="input u-m-l-10" placeholder="请输入关键字" v-model="keyWords" @confirm="doSearch" />
    	<u-icon v-if="keyWords !=''" @click="keyWords=''" name="close-circle-fill" color="#b4b4b4" size="35"></u-icon>	
    </view>	
    
    <template v-if="list && list.length > 0">
      <view v-for="(items, index) in list" :key="index" class="box">
        <view class="tit u-font-30">{{items.name}}</view>
        <view class="tips">
          <view v-for="item in items.child" :key="item.id" class="item" @click="getKeyWords(item.title)">{{item.title}}</view>
        </view>
      </view>
    </template>
  </Layout>
</template>

<script>
	export default {
		data() {
			return {
				keyWords:'',	
        isDelShow:false,
        list:null
			}
		},
    onLoad(){
      this.$api.searchFieldApi({}).then(res=>{
        this.list = res.data
      })
    },
		methods: {
			doSearch() {
				if(!this.keyWords){
					this.$u.toast('请输入关键词')
					return;
				}
				this.active = true;
				this.goPage('/home/search/result?keyWords='+this.keyWords)
			},
      getKeyWords(e){
        this.keyWords = e;
        this.doSearch()
      },
		}
	}
</script>

<style lang="scss" scoped>
.search{
  border-radius: 60rpx; background-color: #F6F7F9;
  
}
.search-keyword{
	padding:0 30rpx 30rpx;
	.keyword-block{
		padding-bottom: 30rpx;
		border-top: 1px solid #F4F6F8;
	}
}
.search-box{
  height: 80rpx; border-radius: 40rpx; padding-left: 32rpx; position: relative; background-color: #F6F7F9; padding-right: 20rpx;
  .zz-bg{position: absolute; width: 100%; height: 100%; left: 0; top:0; top: 20;}
  .input{background-color: #F6F7F9; flex: 1; height: 70rpx; line-height: 70rpx;}
}
.tit{margin: 50rpx 0 30rpx;}
.tips{
  display: flex; align-items: center; flex-wrap: wrap;
  .item{background-color: #F4F6F8; border-radius: 40rpx; padding: 0 30rpx; line-height: 56rpx; font-size: 26rpx; color: #666; margin: 0 16rpx 20rpx 0;}
}
</style>
